<!--
 * @Descripttion: 条形码
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-28 10:21:13
 -->
<template>
  <div>
    <!-- unitData: {{ unitData }} -->
    <slot name="title">
      <h3>条形码</h3>
      <el-divider />
    </slot>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :edit-config="{trigger: 'click', mode: 'row'}"
      :columns="columnsData"
      :data="barcodeData"
    />
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { initDefaultBarcodeData, initUpdateBarcodeData } from './utils/barcode'

export default {
  name: 'Barcode',
  mixins: [oftenuse],
  props: {
    /**
     * 规格数据
     */
    skuData: {
      type: Object,
      default: () => { return {} }
    },
    /**
     * 单位数据
     */
    unitData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      barcodeData: [],
      unitColumnsData: [
        { field: 'unitName', width: 150,
          title: '计量单位'
        },
        { field: 'barcode', width: 200,
          title: '条形码',
          cellRender: {
            name: 'ElInput',
            props: { size: 'mini', min: 0 }
          }
        }
      ]
    }
  },
  computed: {
    columnsData: function() {
      const unitColumnsData = this.unitColumnsData
      return [...unitColumnsData]
    }
  },
  watch: {
    'skuData': {
      handler(skuData) {
        if (!skuData) return
        const unitData = this.unitData || []
        const { goodsBarcodeList } = skuData
        this.initData(goodsBarcodeList, unitData)
      },
      immediate: true
    },
    'unitData': {
      handler(unitData) {
        if (!unitData) return
        const skuData = this.skuData || []
        const { goodsBarcodeList } = skuData
        this.initData(goodsBarcodeList, unitData)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  methods: {
    getBarcodeData() {
      return this.barcodeData
    },
    initData(goodsBarcodeList = [], unitData) {
      this.barcodeData = goodsBarcodeList
        ? initUpdateBarcodeData(unitData, goodsBarcodeList)
        : initDefaultBarcodeData(unitData)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-divider--horizontal{
    margin: 5px 0;
  }
</style>
